<script setup>
import { ref } from "vue";
import { RouterView } from "vue-router";
import { useRouter, useRoute } from "vue-router";
import { useHomePageStore } from "@/stores/homePage";
const { exitUser } = useHomePageStore();

// 路由实例
const route = useRoute();
console.log(route.path);
</script>
<template>
  <div class="admin">
    <el-menu
      :default-active="route.path"
      class="side-menu"
      background-color="#b895a7"
      text-color="#000"
      active-text-color="#b895a7"
      router
    >
      <img src="/src/assets/images/title.png" alt="" />

      <!-- 首页 -->
      <el-menu-item index="/admin/aHome">
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </el-menu-item>

      <!-- 用户管理 -->
      <el-menu-item index="/admin/users">
        <i class="iconfont icon-yonghu"></i>
        <span>用户管理</span>
      </el-menu-item>

      <!-- 网址管理 -->
      <el-menu-item index="/admin/urlManagement">
        <i class="iconfont icon-lianjie"></i>
        <span>网址管理</span>
      </el-menu-item>

      <!-- 语录管理 -->
      <el-menu-item index="/admin/sayings">
        <i class="iconfont icon-liuyan1"></i>
        <span>语录管理</span>
      </el-menu-item>

      <!-- 消息管理 -->
      <el-menu-item index="/admin/aMessage">
        <i class="iconfont icon-liuyan"></i>
        <span>消息管理</span>
      </el-menu-item>
    </el-menu>

    <div class="tcgl" @click="exitUser">退出管理</div>

    <div class="main">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/admin/index/index.scss");
</style>
<style scoped lang="scss">
.tcgl {
  position: absolute;
  left: 2%;
  bottom: 10%;
  text-align: center;
  width: 100px;
  height: 50px;
  line-height: 50px;
  background-color: #b895a7;
  border-radius: 5px;
  color: #fff;
  box-shadow: 2px 2px 5px #00000025;
  cursor: pointer;
  transition: all 0.3s ease;
  &:hover {
    transform: scale(0.9);
  }
}
</style>
